Skip to content

feat(card-carousel): replace card_carousel.js with Rust/web_sys#39

Open
krishpranav wants to merge 1 commit into
rust-ui:mainfrom
krishpranav:feat/issue-27-card-carousel-rust
Open

feat(card-carousel): replace card_carousel.js with Rust/web_sys#39
krishpranav wants to merge 1 commit into
rust-ui:mainfrom
krishpranav:feat/issue-27-card-carousel-rust

Conversation

@krishpranav
Copy link
Copy Markdown
Contributor

Description

public/app_components/card_carousel.js was a ~35-line vanilla JS file loaded
via a <script type="module"> tag in the demo. It handled nav button clicks and
scroll-based indicator/button state updates through delegated listeners on
document.

This PR replaces it entirely with a pure Rust module using web_sys, following
the same pattern established in #21 (lock_scroll.js) and #26 (otp.js).

What changed

  • Added app_crates/registry/src/hooks/use_card_carousel.rs — two delegated
    event listeners on document, registered once via a thread_local! singleton:
    • click: walks up from the click target to CardCarouselNavButton via
      closest(), identifies prev/next by DOM identity comparison against
      buttons[0], scrolls the track by one full clientWidth
    • scroll (capture phase): computes the current slide index from
      scrollLeft / clientWidth, syncs aria-current on indicator dots and
      aria-disabled on prev/next nav buttons
  • Wired CardCarouselTrack to call use_card_carousel::init() under
    #[cfg(target_arch = "wasm32")] — same pattern as use_input_otp::init()
    in InputOTP
  • Deleted public/app_components/card_carousel.js
  • Removed the <script> tag from demo_card_carousel.rs
  • Updated the registry snapshot (demo_card_carousel.md) and tree.md to
    remove the js: dependency entry

Validation

cargo build -p registry
cargo clippy -p registry -- -D warnings

Closes #27

Migrates the vanilla JS carousel controller to a pure Rust module,
eliminating the <script> tag and the JS file entirely.

Two delegated listeners are registered once on `document` via a
thread_local singleton (same pattern as use_input_otp):

- click: walks up to CardCarouselNavButton, determines prev/next by
  DOM identity comparison against buttons[0], scrolls the track by
  one full clientWidth in the correct direction
- scroll (capture phase): computes current slide index from
  scrollLeft / clientWidth, syncs aria-current on indicator dots
  and aria-disabled on prev/next nav buttons

init() is called from CardCarouselTrack under #[cfg(target_arch = "wasm32")],
so the hook activates automatically whenever the component mounts.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Replace card_carousel.js with a Rust implementation using web_sys

1 participant